<template>
  <div class="app-container">
    <el-card class="pag-container">
      <div class="title-top">
        <div class="header-title">
            <span class="header-title-text">
              <span v-for="item in billTypeList" :key="item.value">
                <span class="_before" v-if="form.billType==item.value">{{item.label}}{{typeRef==1 ? '编辑':'详情'}}</span>
              </span>
            </span>
        </div>
        <img  src="../../../../assets/images/billStatus5.png" v-if="form.billStatus==5" alt="" class="title-img" />
        <img  src="../../../../assets/images/billStatus10.png" v-else-if="form.billStatus==10" alt="" class="title-img" />
        <img  src="../../../../assets/images/billStatus15.png" v-else-if="form.billStatus==15" alt="" class="title-img" />
        <img  src="../../../../assets/images/billStatus20.png" v-else-if="form.billStatus==20" alt="" class="title-img" />
        <img  src="../../../../assets/images/billStatus25.png" v-else-if="form.billStatus==25" alt="" class="title-img" />
      </div>
      <div class="main-top">
        <div class="main-top-list">
          <div class="main-top-item">账单编号：{{form.billNo}}</div>
          <div class="main-top-item">账单类型：
            <span v-for="item in billTypeList" :key="item.value">
              <span v-if="form.billType==item.value">{{item.label}}</span>
            </span>
          </div>
          <div class="main-top-item tes" v-if="form.billType!=15">业务编号：
            <sapn v-for="item in form.businessNo" :key="item.businessNo">{{item.businessNo}}</sapn>
          </div>
          <div class="main-top-item">业务类型：
            <span v-for="item in dictList.refTypeList" :key="item.value">
              <span v-if="form.refType==item.value">{{item.label}}</span>
            </span>
            </div>
          <div class="main-top-item">结算流向：{{form.settlementDirection==1 ? '应收':'应付'}}</div>
          <div class="main-top-item">结算单位：{{form.settlementCompanyName}}</div>
        </div>
        <div class="titie-main" v-if="form?.billUrl.length>0">
          <div class="titie-main-fl tes">附件</div>
          <div class="titie-main-input">
            <uploadList :disabledUpload="disabledUpload" @uploadSccess="billUrlChang" :maxLimit="10" :detailFileList="form.billUrl"></uploadList>  
            <div style="color: #666; font-size: 14px;" v-if="typeRef==1">请上传pdf/doc/docx/xls/xlsx/jpg/png/zip文件，单文件大小在10M以内，最多上传10个文件</div>
          </div>
        </div>
        <div class="titie-main">
          <div class="titie-main-fl tes">备注</div>
          <div class="titie-main-input">
            <el-input
              v-model.trim="form.remark"
              :disabled="disabledUpload"
              :rows="3"
              type="textarea"
              maxlength="100"
              :formatter="containsEmoji"
              placeholder="请输入备注信息"
            />
          </div>
        </div>
      </div>
      <el-form ref="formRef">
        <div class="titie-main">
          <span class="_before" v-if="form.billType==15">堆存明细</span>
          <span class="_before" v-else>业务明细</span>
        </div>
        <el-table stripe :data="feeBusinessList">
          <template v-for="item in filterColumns(columns)" :key="item.key">
            <el-table-column v-if="item.visible" :label="item.label" align="center"
            :prop="item.key" :fixed="item?.fixed" :width="item?.width">
              <template v-if="item.slotName=='boxType'" #default="scope">
                {{ boxTypeOptions[scope.row.boxType] }}
              </template>
              <template v-else-if="item.slotName=='boxCondition'" #default="scope">
                {{ boxCaseOptions[scope.row.boxCondition] }}
              </template>
              <template v-else-if="item.slotName=='containerClassify'" #default="scope">
                {{ boxClassify[scope.row.containerClassify] }}
              </template>
              <template v-else-if="item.slotName=='outDate'" #default="scope">
                {{ formatDate(scope.row.outDate,2)}}
              </template>
              <template v-else-if="item.slotName=='shouldReturnDate'" #default="scope">
                {{ formatDate(scope.row.shouldReturnDate,2)}}
              </template>
              <template v-else-if="item.slotName=='returnDate'" #default="scope">
                {{ formatDate(scope.row.returnDate,2) || '--'}}
              </template>
              <template v-else-if="item.slotName=='sellDate'" #default="scope">
                {{ formatDate(scope.row.sellDate,2)}}
              </template>  
              <template v-else-if="item.slotName=='companyName'" #default="scope">
                <template v-if="scope.row.containerClassify == 10">
                  <el-tooltip  class="box-item" effect="dark" :content="scope.row.outBoxCompanyName" placement="top" >
                    <div class="nameText"> {{ scope.row.outBoxCompanyName}}</div>
                  </el-tooltip>
                </template>
                <template v-else>
                  <el-tooltip  class="box-item" effect="dark" :content="scope.row.companyName" placement="top" >
                    <div class="nameText"> {{ scope.row.companyName}}</div>
                  </el-tooltip>
                </template>
              </template>            
            </el-table-column>
          </template>
        </el-table>
        <div class="fee-main">
          <div class="fee-item tes">总计</div>
          <div class="fee-item" v-if="form.refType!=20 && form.billType==5">已还箱量：{{ form.returnQty || 0 }}</div>
          <div class="fee-item" v-if="form.refType!=20 && form.billType==5">未还箱量：{{ form.unreturnQty || 0 }}</div>
          <div class="fee-item">总箱量：{{ form.totalQty || 0 }}</div>
        </div>
        <div class="titie-main">
          <span class="_before">{{form.settlementDirection==1 ? '应收':'应付'}}费用明细</span>
        </div>
        <el-table stripe :data="feeDetailsBeanList">
          <template v-for="item in columnsOne" :key="item.key">
            <el-table-column v-if="item.visible" :label="item.label" align="center"
            :prop="item.key" :fixed="item?.fixed" :width="item?.width">
            <template v-if="item.slotName=='feeCode'" #default="scope">
                  <span v-for="item in feeCodeList" :key="item.value">
                    <span v-if="scope.row.feeCode==item.value">{{item.label}}</span>
                  </span>  
              </template>
              <template v-else-if="item.slotName=='deductAmount'" #default="scope">
                <div style="display: flex;justify-content:center">
                  {{scope.row.feeCurrency=='CNY' ? '¥':'$'}}{{scope.row.deductAmount}}                    
                </div>
                </template>
              <template v-else-if="item.slotName=='settlementCompanyName'" #default="scope">
                <div style="display: flex;justify-content:center">
                  <span v-for="item in settlementCompanyTypeList" :key="item.value">
                    <span v-if="scope.row.settlementCompanyType==item.value">{{item.label}}：</span>
                  </span>                    
                  <span>{{scope.row.settlementCompanyName}}</span>                    
                </div>
                </template>                
                  <template v-else-if="item.slotName=='writeOffStatus'" #default="scope">
                  <span v-if="scope.row.writeOffStatus==5" class="corol-blue">未建账单</span>
                  <span v-else-if="scope.row.writeOffStatus==10" class="corol-red">已建账单</span>
                </template>
                <template v-else-if="item.slotName=='remark'" #default="scope">                     
                  <el-tooltip :content="scope.row.remark" effect="dark" placement="top">
                    <span class="texx-ov">{{scope.row.remark || '--'}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
          </template>
        </el-table>
        <el-pagination v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize" :pager-count="5" :page-sizes="[10, 20, 50, 100]" :total="config.total"
          background layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange" size="small" style="float: right;margin-top: 10px;" />
        <div class="titie-main">
          <span class="_before">费用合计</span>
        </div>
        <div class="tibs">*为您独立计算了费用明细中出现的各类币种的各自费用合计</div>
        <div class="fee-main">
          <div class="fee-item tes">总计</div>
          <div class="fee-item">{{form.settlementDirection==1 ? '应收':'应付'}}金额：<span class="corol-red">¥{{ form.deductBillCnyAmountTes || 0 }}</span></div>
          <div class="fee-item">{{form.settlementDirection==1 ? '应收':'应付'}}金额：<span class="corol-red">${{ form.deductBillUsdAmountTes || 0 }}</span></div>
          <div class="fee-item" v-if="!disabledUpload">{{form.settlementDirection==1 ? '实收':'实付'}}金额：<span class="corol-red">
            <el-input v-model.trim="form.deductBillCnyAmount" :formatter="formatterNumber" :parser="formatterNumber" placeholder="请输入" style="width: 150px;">
              <template #prepend>¥</template>
            </el-input></span>
          </div>
          <div class="fee-item" v-if="!disabledUpload">{{form.settlementDirection==1 ? '实收':'实付'}}金额：<span class="corol-red">
            <el-input v-model.trim="form.deductBillUsdAmount" :formatter="formatterNumber" :parser="formatterNumber" placeholder="请输入" style="width: 150px;">
              <template #prepend>$</template>
            </el-input>
          </span></div>
          <!-- <div class="fee-item">已核销金额：<span class="corol-red">¥{{ form.paidBillCnyAmount || 0 }}</span></div>
          <div class="fee-item">已核销金额：<span class="corol-red">${{ form.paidBillUsdAmount || 0 }}</span></div>
          <div class="fee-item">未核销金额：<span class="corol-red">¥{{ form.unpaidBillCnyAmount || 0 }}</span></div>
          <div class="fee-item">未核销金额：<span class="corol-red">${{ form.unpaidBillUsdAmount || 0 }}</span></div> -->
        </div>
        <div class="titie-main" v-if="form.billType==5">
          <div class="titie-main-fl">折算费用合计</div>
        </div>
        <div class="fee-main" v-if="form.billType==5">
          <div class="fee-item tes">总计</div>
          <div class="fee-item">折算币种：<span class="corol-red">{{ form.conversionCurrency =='CNY' ? '¥':'$' }}</span></div>
          <div class="fee-item">折算汇率：<span class="corol-red">{{ form.rate || 0 }}</span></div>
          <div class="fee-item">折算金额：<span class="corol-red">{{ form.deductConversionAmountTes || 0 }}</span></div>
          <div class="fee-item" v-if="!disabledUpload">{{form.settlementDirection==1 ? '实收':'实付'}}金额：<span class="corol-red">
            <el-input v-model.trim="form.deductConversionAmount" :formatter="formatterNumber" :parser="formatterNumber" placeholder="请输入" style="width: 150px;" /></span>
          </div>
        </div>
        <div class="titie-main">
          <span class="_before">核销记录</span>
        </div>
        <el-table stripe :data="billWriteOffBeanList">
          <template v-for="item in columnsTwo" :key="item.key">
            <el-table-column v-if="item.visible" :label="item.label" align="center"
            :prop="item.key" :fixed="item?.fixed" :width="item?.width">
              <template v-if="item.slotName=='index'" #default="scope">
                  {{ scope.$index+1 }}
              </template>
              <template v-if="item.slotName=='amount'" #default="scope">
                  {{scope.row.currency =='CNY' ? '¥':'$'}}{{scope.row.amount}}
              </template>
              <template v-else-if="item.slotName=='writeOffTime'" #default="scope">
                  {{ formatDate(scope.row.writeOffTime,2)}}
              </template>
              <template v-else-if="item.slotName=='billUrl'" #default="scope">
                  <template v-if="form.billStatus == 25">
                    <el-button :icon="Upload" @click="uploadTap(scope.$index,scope.row.billUrl)">查看附件</el-button>
                  </template>
                  <template v-else>
                    <el-button :icon="Upload" @click="uploadTap(scope.$index,scope.row.billUrl)">上传附件</el-button>
                  </template>
                 
              </template>
              <template v-else-if="item.slotName=='remark'" #default="scope">
                <el-tooltip :content="scope.row.remark" effect="dark" placement="top">
                  <span class="texx-ov">{{scope.row.remark || '--'}}</span>
                </el-tooltip>
              </template>
              <template v-else-if="item.slotName=='writeOffRecordStatus'" #default="scope">
                  <span v-if="scope.row.writeOffRecordStatus==5" class="corol-blue">已核销</span>
                  <span v-else-if="scope.row.writeOffRecordStatus==10" class="corol-red">已撤销</span>
              </template>
              <template v-else-if="item.slotName=='flex'" #default="scope">
                <template v-if="form.billStatus != 25" >
                  <el-tooltip content="取消" effect="dark" placement="top" v-if="scope.row.writeOffRecordStatus==5">
                    <el-icon @click="revocationBox(scope.row)" color="#2158F3" style="margin-right:20px"><FolderDelete /></el-icon>
                  </el-tooltip>
                </template>
                <template v-else>--</template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="dialog-footer">
          <el-button @click="submitForm" v-if="!disabledUpload">保存</el-button>
          <el-button type="primary" v-if="form.billStatus==15 || form.billStatus==20" @click="verificationTap">核销</el-button>
          <el-button type="primary" v-if="form.billStatus==5" @click="duizhangBox" >已对账</el-button>
        </div>
      </el-form>
      <el-dialog v-model="showFileDialog" title="附件" v-if="showFileDialog" :with-header="false">
        <uploadList  @uploadSccess="billWriteOffBeanListUrlChang" :detailFileList="billWriteOffBeanListUrl"></uploadList>  
      </el-dialog>
      <!-- 核销 -->
      <verificationModalForm ref="verificationModalMormRef"  @verificationMode="getRoleDetail"></verificationModalForm>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted,onActivated } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus,Grid,Delete,Upload } from '@element-plus/icons-vue'
import { updateBill,getBillBusinessDetailsById,updateBillStatus ,writeOffBillRevoke} from '@/api/financial/bills'
import uploadList from '@/components/upload/uploadList.vue'
import UploadFilesImages from '@/components/upload/uploadFiles-Images'
import verificationModalForm from '@/views/financialManage/bills/components/verificationModalForm.vue'
import { formatDate,warTime,formatterNumber,containsEmoji } from '@/utils'
import { getTableList,} from '@/api/financial/operatingInfo'
import { useRoute } from 'vue-router'
import dictList from '@/utils/dictList'

const dialogRole=ref(false) //弹框
const feeBusinessList=ref([]) //业务
const feeDetailsBeanList=ref([]) //费用
const billWriteOffBeanList=ref([]) //核销
const showFileDialog=ref(false)
const form=ref({billUrl:[]})
const billWriteOffBeanListUrl=ref([])
const billWriteOffBeanListIndex=ref(0)
const verificationModalMormRef = ref()
const feeCodeList=ref([
  {
    value:5,
    label:'修箱费'
  },{
    value:10,
    label:'提箱费'
  },{
    value:15,
    label:'翻箱费'
  },{
    value:20,
    label:'其他费用'
  },{
    value:25,
    label:'超期费'
  },{
    value:30,
    label:'吊装费'
  },{
    value:35,
    label:'堆存超期费'
  },{
    value:40,
    label:'租入费'
  },{
    value:45,
    label:'租出费'
  },{
    value:50,
    label:'购箱费'
  },{
    value:55,
    label:'卖箱费'
  },{
    value:60,
    label:'箱贴费'
  },
])
const billTypeList=ref([
  { label: '业务账单', value: 5 },
  { label: '超期费账单', value: 10},
  { label: '堆存费账单', value: 15}
])

const settlementCompanyTypeList=ref([
  {
    value:5,
    label:'客户'
  },
  {
    value:10,
    label:'堆场'
  },
  {
    value:15,
    label:'第三方'
  },
])
const boxTypeOptions=ref({ 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' })
const boxCaseOptions=ref({5: '全新', 10: '次新', 15: '适货', 20: '混提' })
const boxClassify=ref({5: '自有', 10: '代管', 15: '外调'})
// 基础数据
const columns = ref([
  {key: 'refNo', label: `箱号`, visible: true},
  {key: 'boxType', label: `箱型`,slotName: 'boxType', visible: true},
  {key: 'boxCondition', label: `箱况`,slotName: 'boxCondition', visible: true},
  {key: 'boxUsagePeriod', label: `箱使期（天）`,width: 120, visible: true},
  {key: 'outDate', label: `提箱日期`,slotName: 'outDate', width: 120,visible: true},
  {key: 'shouldReturnDate', label: `应还箱日期`,slotName: 'shouldReturnDate',width: 120, visible: true},
  {key: 'returnDate', label: `实还箱日期`,slotName: 'returnDate',width: 120, visible: true},
  {key: 'sellDate', label: `出售日期`,slotName: 'sellDate',width: 120, visible: true},
  {key: 'carryCityName', label: `提箱城市`, visible: true},
  {key: 'returnCityName', label: `还箱城市`, visible: true},
  {key: 'containerClassify', label: `箱源`,slotName: 'containerClassify', visible: true},
  {key: 'companyName',width: 150,  label: `集装箱公司`,slotName: 'companyName',  visible: true},
  {key: 'agentName',width: 150,  label: `客户`, visible: true},

]);
// 列显隐信息
const columnsOne = ref([
  {key: 'refNo', label: `箱号`, slotName: 'refNo', width: 300, visible: true,},
  {key: 'feeCode', label: `费用名称`, slotName: 'feeCode', width: 100, visible: true,},
  {key: 'deductAmount', label: `金额`, slotName: 'deductAmount', width: 100, visible: true},
  {key: 'settlementCompanyName', label: `结算单位`, slotName: 'settlementCompanyName',  visible: true},
  {key: 'writeOffStatus', label: `状态`, slotName: 'writeOffStatus',  visible: true},
  {key: 'remark', label: `备注`, slotName: 'remark',visible: true,},
]);
// 列显隐信息
const columnsTwo = ref([
  {key: 'index', label: `序号`, slotName: 'index', width: 100, visible: true,},
  {key: 'amountCny', label: `收款金额(¥)`, width: 200, visible: true,},
  {key: 'amountUsd', label: `收款金额($)`, width: 200, visible: true,},
  {key: 'writeOffTime', label: `收款日期`, slotName: 'writeOffTime', width: 200, visible: true,},
  // {key: 'createBy', label: `核销人`, slotName: 'createBy', width: 200, visible: true},
  {key: 'writeOffName', label: `核销人`, slotName: 'writeOffName', width: 200, visible: true},
  {key: 'remark', label: `备注`, slotName: 'remark',visible: true,},
  {key: 'writeOffRecordStatus', label: `核销状态`, slotName: 'writeOffRecordStatus', width: 100, visible: true,},
  {key: 'billUrl', label: `附件`, slotName: 'billUrl',visible: true,width: 200, },
  {key: 'flex', label: `操作`, slotName: 'flex',visible: true,width: 150},
]);
const formRef=ref()
const typeRef=ref(1) //1编辑 2查看
const billType=ref(5)
// const titleType=ref('出租')
const route = useRoute();
const billsId=ref(null)
const disabledUpload=ref(false)
onActivated(() => {
// console.log(route)
  typeRef.value=Number(route.query.type) 
  billType.value=Number(route.query.billType)
  billsId.value=Number(route.query.id)
  getRoleDetail() 

})
// //核销
const verificationTap=(row)=>{
    verificationModalMormRef.value.onShow(billsId.value,form.value.refType,1)
}
//核销上传附件
const uploadTap=(index,urlList)=>{
  billWriteOffBeanListIndex.value = index
  billWriteOffBeanListUrl.value = urlList
  showFileDialog.value = true
}
//核销上传附件回显
const billWriteOffBeanListUrlChang=(row)=>{
  billWriteOffBeanList.value[billWriteOffBeanListIndex.value].billUrl=row
 billWriteOffBeanListUrl.value=row
  console.log('billWriteOffBeanList.value[billWriteOffBeanListIndex.value].billUrl',billWriteOffBeanList.value[billWriteOffBeanListIndex.value].billUrl)
}
//修改核销操作
const revocationBox = (row) => {
  let centent=''
  let billStatus=10
  centent='您确定要取消核销记录吗？'
    ElMessageBox.confirm(
    centent,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let data={
        id:row.id,
      }
      writeOffBillRevoke(data).then((res) => {
        ElMessage.success('操作成功')
        getRoleDetail()
      })
    })
}
//状态修改
const duizhangBox = () => {
  let centent=''
  let billStatus=15
  let ids=[]
  centent='您确定所勾选的账单已完成对账？'
    ElMessageBox.confirm(
    centent,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      let data={
        ids:ids,
        billStatus:billStatus
      }
      data.ids.push(billsId.value)
      updateBillStatus(data).then((res) => {
        ElMessage.success('操作成功')
        getRoleDetail()
      })
    })
}
const queryParams=ref({
    billId:'',
    pageNum: 1,
    pageSize: 10,
})
const config=ref({
  total:0
})
//应收应付明细
const getFilterData = () => {
  queryParams.value.billId=billsId.value
  getTableList(JSON.stringify(queryParams.value)).then(res => {
    feeDetailsBeanList.value=res.data.list
    config.value.total = res.data.total
  })
}
// 分页数量
const onHandleSizeChange = (val: number) => {
 queryParams.value.pageSize = val;
 getFilterData()
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  queryParams.value.pageNum = val;
  getFilterData()
};
const emits = defineEmits(['updateMode'])
/** 提交按钮 */
const submitForm = () =>{
  let data= JSON.parse(JSON.stringify(form.value))
  data.billUrl=JSON.stringify(data.billUrl)
    updateBill(data).then(response => {
          ElMessage.success('编辑成功');
          getRoleDetail()
    });
};
//关闭弹框
const cancel = () => {
  dialogRole.value=false
}
//批量图片回显
const billUrlChang=(row)=>{
  // form.value.billUrl.push(row)
  form.value.billUrl=row
}
//详情查询
const getRoleDetail=()=>{
  let data={
    id:billsId.value,
    billType:billType.value
  }
  getBillBusinessDetailsById(data).then(res => {
    feeBusinessList.value=res.data.feeBusinessList
    billWriteOffBeanList.value = res.data.billWriteOffBeanList
    billWriteOffBeanList.value.forEach(item =>{
      item.billUrl=JSON.parse(item.billUrl) || []
    })
    form.value=res.data
    form.value.deductBillCnyAmountTes=res.data.deductBillCnyAmount
    form.value.deductBillUsdAmountTes=res.data.deductBillUsdAmount
    form.value.deductConversionAmountTes=res.data.deductConversionAmount
    form.value.billUrl=JSON.parse(res.data.billUrl) || []
    form.value.businessNo=JSON.parse(res.data.businessNo) || []
    if(res.data.billStatus==5 && typeRef.value==1){
       disabledUpload.value=false
    }else{
      disabledUpload.value=true
    }
    columnsTwo.value.forEach(item =>{
      if(item.key=='amountCny'){
        if(form.value.settlementDirection==1){
          item.label='收款金额(¥)'
        }else{
          item.label='付款金额(¥)'
        }
      }
      if(item.key=='amountUsd'){
        if(form.value.settlementDirection==1){
          item.label='收款金额($)'
        }else{
          item.label='付款金额($)'
        }
      }
    })   
    getFilterData()
  })
}
//过滤列是否显示
const filterColumns = (list) => {
  let columnsList=[]
  if(form.value.refType==5 || form.value.refType==10){
    columnsList=list.filter(person => person.key != 'sellDate')
  }else if(form.value.refType==20){    
    columnsList = list.filter(person => person.key != 'outDate' && person.key != 'shouldReturnDate' && person.key != 'returnDate' && person.key != 'returnCityName' && person.key != 'boxUsagePeriod')
  }
  return columnsList
}
// defineExpose({ onShow })
</script>

<style scoped>
.corol-red{
  color: #FF4242;
}
.corol-blue{
  color: #0364FF;
}
.titie-main{
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0 10px;
}
.titie-main-fl{
  color: #121317;
  font-weight: bold;
}
.titie-main-fl.tes{
  font-weight: normal;
}
.tibs{
  color: #2158F3;
  font-size: 12px;
}
.fee-main{
  display: flex;
  border: 1px solid #eeeeee;
  margin-top: 10px;
}
.fee-item.tes{
  border-right:1px solid #eeeeee ;
}
.fee-item{
  margin-right: 10px;
  padding: 10px 20px;

}
.titie-main-input{
  flex: 1;
  margin-left: 20px;
}
.header-title{
  display: flex;
  align-items: center;
}
.header-title-text{
  padding-left: 8px;
  /* font-weight: bold; */

}
.header-title .header-title-bj{
  width: 4px;
  background: #2158F3;
  height: 18px;
}
.main-top-list{
  display: flex;
  justify-content: space-between;
}
.texx-ov{
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制文本为2行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-top{
  margin-top: 20px;
}
.dialog-footer{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.title-top{
  display: flex;
  justify-content: space-between;
}
.title-img{
  width: 100px;
}
.main-top-item.tes{
   white-space: nowrap;      /* 禁止文本换行 */
    overflow: hidden;         /* 溢出内容隐藏 */
    text-overflow: ellipsis;  /* 溢出部分显示省略号 */
    width: 200px;             /* 必须设置宽度 */
}
.nameText{
  display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}
</style>